<script>
  import { setContext } from 'svelte'
  import {onMount} from 'svelte';
  import {Post} from '../lib/net.js';
  import {FontHost, VeriState} from '../conf.js';
  import {VeriList, VeriSuccess, VeriFailed,Advice,Advicedel} from '../api.js';
  import Query from '../model/query.js';
  import QueryBar from '../components/queryBar.svelte';
  import {IsAdmin} from '../lib/token.js';
  import moment from 'moment';
  import List from '../components/list.svelte';
  import Btn from '../components/btn.svelte';
  import Paging from '../components/paging.svelte';

 
  // let total = 0;
  // let agents = 0;
  // let users = 0;


  let query = new Query();

  // 向列表赛数据，须先定义表头，拿到数据后做title下表映射关系.

  let data = {title: ["ID", "姓名", "手机号","邮箱", "备注", "时间", "操作"], data: []}

  onMount(() => {
    doneList();
  });

  async function getList() {
    let ret = await Post(Advice, query)

    // console.log(ret.total)
    query.total = "";
    query.size=""
    query.page=""
    // $: numOfFriends = people.friends.length;
    $: query.total = ret.total;
    $: query.size = ret.size;
    $: query.page = ret.page;
    let _data = [];
    for (let item of ret.list) {
      let arr = [
		  item.id, 
		  item.name, 
		  item.phone,
		  item.email, 
		  item.content, 
		  item.insertDate,
		  `<button class="button is-danger is-small" data-id="${item.id}" on:click>删除</button>` 
		  ]
      // if (query.state == 1) {
      //   arr.push(item.show_update_date)
      // }
      
      arr.id = item.info_id;
      arr.handler = deal;
      _data.push(arr);
    }
    data.data = _data;
    console.log('query')
    console.log(query)
    // setContext('someKey', query)
  }

  async function deal() {
    if (!confirm("确定要删除吗？")) return
    let id = Number(this.children[0].getAttribute("data-id"));
	await Post(Advicedel, {id});
	setTimeout(getList, 1500)
  }

  function setPage(page) {
    query.page = page;
    getList();
  }

  async function prepareList() {
    query.state = 0;
    setPage();
  }

  async function doneList() {
    query.state = 1;
    setPage();
  }

  async function refuseList() {
    query.state = 2;
    await setPage();
  }
</script>

<div class="view">
		<div style="display: flex;flex-direction: row;align-items: center;width: 99%;margin: 5px;height: 60px;background-color: white;margin-top: 5px"
				 class="borderRadius4">
        <span style="color: #20222A;margin: 20px">
            联系我们-用户信息
        </span>
		</div>
		<!--<div class="borderRadius4 container rowCenter ">-->
				<!--<QueryBar query={query} on:message={getList}/>-->
		<!--</div>-->
		<!--<div class="borderRadius4 container  backBlue colorWhite ">-->
				<!--<div class="columns" style="padding: 20px;">-->
						<!--<div class="column is-2">-->
								<!--<nav class="level">-->
										<!--<div class="level-item has-text-centered">-->
												<!--<div>-->
														<!--<p class="heading">实名总数</p>-->
														<!--<p class="font25 colorWhite">{query.total}人</p>-->
												<!--</div>-->
										<!--</div>-->
								<!--</nav>-->
						<!--</div>-->
				<!--</div>-->
		<!--</div>-->
		<div class="container" style="margin-top: -10px">
				<List data={data}/>
		</div>
		<div class="container rowReverse">
				{#if query.total !== 0}
				<Paging page={query} handler={setPage}/>
						{/if}
		</div>
</div>

<style>
		.borderRadius4{
				border-radius: 4px;
		}
		.container {
				margin:20px 5px;
		}
		.info {
				background: #fff;
		}

		.btn {
				line-height: 5px;
				top: 50%;
				transform: translateY(10%);
		}
</style>
